<template>
	<div class="dress-box" v-if="!!store.baseAddress && !store.chosenAddress">
		<div class="dress" @click="toEditAddress">
			<div class="user">
				<p>{{ store.baseAddress.name }}</p>
				<p v-show="store.baseAddress.isDefault" class="mr">默认</p>
			</div>
			<div class="phone">
				<p>{{ store.baseAddress?.tel.replace(store.baseAddress?.tel.substring(3, 7), '****') || '空' }}</p>
				<p>{{ store.baseAddress?.address }}</p>
			</div>
			<p class="jiantou">></p>
		</div>
		<van-submit-bar :price="store.allprice * 100" button-text="点击支付" @submit="share" />
		<van-dialog v-model="show" title="请扫码支付" show-cancel-button :show="show" @click="show = false" :showConfirmButton="false" cancelButtonText="取消支付" @cancel="cancel">
			<img class="img" :src="imrUrl" />
		</van-dialog>
	</div>
	<div class="dress-box" v-if="store.chosenAddress">
		<div class="dress" @click="toEditAddress">
			<div class="user">
				<p>{{ store.chosenAddress.name }}</p>
				<p v-show="store.chosenAddress.isDefault" class="mr">默认</p>
			</div>
			<div class="phone">
				<p>{{ store.chosenAddress?.tel.replace(store.chosenAddress?.tel.substring(3, 7), '****') || '空' }}</p>
				<p>{{ store.chosenAddress?.address }}</p>
			</div>
			<p class="jiantou">></p>
		</div>
		<van-submit-bar :price="store.allprice * 100" button-text="点击支付" @submit="share" />
		<van-dialog v-model="show" title="请扫码支付" show-cancel-button :show="show" @click="show = false" :showConfirmButton="false" cancelButtonText="取消支付" @cancel="cancel">
			<img class="img" :src="imrUrl" />
		</van-dialog>
	</div>
</template>

<script setup>
import useCartstore from '../../../stores/cart';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { reqGetPayQRcode, reqGetTradeInfoData, reqSubmitOrder } from '../../../api/cart';
import QRCode from 'qrcode';
import axios from 'axios';
import { showToast } from 'vant';
const router = useRouter();
const store = useCartstore();
const show = ref(false);
const imrUrl = ref('');
let timer = ref('');
const toEditAddress = () => {
	router.push({ name: 'CartAddress' });
};
// 点击支付
const share = async () => {
	if (store.chosenAddress) {
		var userAddressList = {
			consignee: store.chosenAddress.name,
			consigneeTel: store.chosenAddress.tel,
			deliveryAddress: store.chosenAddress.address,
			orderComment: '',
		};
	} else {
		var userAddressList = {
			consignee: store.baseAddress.name,
			consigneeTel: store.baseAddress.tel,
			deliveryAddress: store.baseAddress.address,
			orderComment: '',
		};
	}

	const { detailArrayList, tradeNo } = await reqGetTradeInfoData();
	const params = {
		...userAddressList,
		orderDetailList: detailArrayList,
		orderComment: '',
		paymentWay: 'ONLINE',
	};
	const orderID = await reqSubmitOrder(tradeNo, params);
	const { codeUrl } = await reqGetPayQRcode(orderID);
	// console.log(orderDetail,'*****');
	show.value = true;
	let url = location.href;
	QRCode.toDataURL(codeUrl)
		// 	//在这里拿到地址，把它赋值给data里面定义的值imrUrl
		.then((tpian) => {
			imrUrl.value = tpian;
		})
		.catch((err) => {
			console.error(err);
		});
	timer.value = setInterval(async () => {
		// 支付状态查询
		const statu = await axios.get(`http://gmall-h5-api.atguigu.cn/api/payment/weixin/queryPayStatus/${orderID}`);
		if (statu.data.code == 200) {
			clearInterval(timer.value);
			show.value = false;
			showToast('支付成功');
			router.push('/cart');
		}
	}, 500);
};
// 点击取消支付
const cancel = () => {
	clearInterval(timer.value);
	showToast('取消支付');
};
onMounted(() => {
	store.getAddress();
	if (!store.baseAddress && !store.chosenAddress) {
		router.push('/cart/address');
	}
});
</script>
<script>
export default {
	name: 'SubmitBar',
};
</script>
<style lang="less" scoped>
.dress-box {
	font-size: 12px;
	padding: 10px;
	background-color: #f4f4f4;
	height: 100%;
	.dress {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 20px;
		div {
			flex-shrink: 0;
		}
		.user {
			display: flex;
			flex-direction: column;
			.mr {
				border: solid 1px red;
				color: red;
			}
		}
		.jiantou {
			font-size: 24px;
		}
	}
}
:deep(.van-submit-bar) {
	bottom: 50px;
	.van-submit-bar__bar {
		height: 50px;
	}
}
.img {
	display: block;
	margin: auto;
}
</style>
